<template>
  <div>
    <div class="swiper">
      <van-swipe
        :autoplay="3000"
        indicator-color="white"
        @change="onChange"
      >
        <van-swipe-item
          v-for="(item,index) in list"
          :key="index"
        >
          <img
            :src="item.src"
            :alt="item.alt"
          >
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-button
      class="default"
      @click="backHome"
      type="primary"
    >返回首页</van-button>
  </div>
</template>

<script>
export default {
  name: 'answer',
  data () {
    return {
      list: [
        { src: 'http://smart.syruptech.cn/test0613/static/swiper/1.jpg', alt: '轮播图1' },
        { src: 'http://smart.syruptech.cn/test0613/static/swiper/2.jpg', alt: '轮播图2' },
        { src: 'http://smart.syruptech.cn/test0613/static/swiper/3.jpg', alt: '轮播图3' },
        { src: 'http://smart.syruptech.cn/test0613/static/swiper/4.jpg', alt: '轮播图4' },
        { src: 'http://smart.syruptech.cn/test0613/static/swiper/5.jpg', alt: '轮播图5' }
      ],
    }
  },
  methods: {
    onChange (index) {
      console.log('当前 Swipe 索引：' + index);
    },
    backHome () {
      this.$router.replace({ name: 'home' });
    }
  }
}
</script>

<style lang="less" scoped>
.swiper {
  text-align: center;
  img {
    width: 100%;
  }
}
.default {
  margin-left: 0.3rem;
}
</style>

